<template>
    <view class="homeworkList">
        <ScNavBar @click="backNav">作业列表</ScNavBar>
        <view
            class="flex-col--c"
            :style="{ height: `calc(100vh - ${navHeight})` }"
        >
            <u-tabs
                customClass="sc-tabs"
                line-width="50"
                line-height="5"
                style="width: 100vw"
                @click="clickTab"
                :list="tabList"
            >
            </u-tabs>
            <view class="scroll-view-box">
                <!-- loading -->
                <ScLoading :loading="loading"/>
                <scroll-view
                    scroll-y
                    class="scroll-view-box"
                    style="height: 100%"
                >
                    <view class="request-list">
                        <view
                            class="request-item flex-row-sb"
                            v-for="item in 10"
                            :key="item.id"
                        >
                            <view class="left flex-col">
                                <text class="name"
                                >张胜男{{ varCss.color }}
                                </text
                                >
                                <text class="day-num">请假天数:三天</text>
                            </view>
                            <view class="right"> 审批中</view>
                        </view>
                    </view>

                    <ScLoadMore
                        NoMoreTitle="~暂无数据~"
                        :status="status"
                        :dataLength="dataLength"
                        :loading="loading"
                    />
                </scroll-view>
            </view>
        </view>
    </view>
</template>

<script>
import page from "@/common/mixin/page";

export default {
    name: "homeworkList",
    mixins: [page],
    data() {
        return {
            urls: {
                0: "v2",
                1: "information",
                2: "getList",
            },
            loading: true,
            subForm: {
                type: ''
            },
            tabList: [
                {
                    name: "全部",
                    value: '',
                },
                {
                    name: "身心健康",
                    value: "身心健康",
                },
                {
                    name: "心理健康",
                    value: "心理健康",
                },
                {
                    name: "校内安全",
                    value: "校内安全",
                },
                {
                    name: "校外安全",
                    value: "校外安全",
                }
            ],
        };
    },
    async created() {
        await this.getDataList(this.subForm);
    },
    methods: {
        clickTab({value}) {
            this.subForm.type = value;
            this.getDataList(this.subForm);
        }
    }
};
</script>
<style lang='scss' scoped>
.homeworkList {
    /deep/ .sc-tabs {
        .u-tabs__wrapper__nav__item__text {
            font-size: 25rpx;
        }
    }

    
    .scroll-view-box {
        flex: 1;
        overflow: hidden;
        width: 100%;

        .request-list {
            .request-item {
                padding: 20rpx 42rpx 0;
                min-height: 142rpx;
                border-top: 1px solid #eeeeee;

                .left {
                    font-size: 28rpx;

                    .name {
                        color: #333333;
                    }

                    .day-num {
                        margin-top: 12rpx;
                        color: #999999;
                    }
                }

                .right {
                    color: #415a6b;
                    font-size: 26rpx;
                }
            }
        }
    }
}
</style>
